<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{scenery.name}}-请您评价</block>
		</cu-custom>
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;margin-bottom:'+(bottomHeight+10)+'px'">
			
			<view class="cu-card case">
				<!-- 评价部分 begin -->					
					<view class="cu-item shadow">
						<view class="cu-bar bg-white">
							<view class="action">
								景点照片
							</view>
							<view class="action">
								{{imgList.length}}/3
							</view>
						</view>
						<view class="cu-form-group">
							<cu-upload :max="3" :imgs="imgList" @imgChange="imgChange"></cu-upload>
						</view>
						<view class="cu-form-group margin-top-sm">
							<view class="title">您的评分</view>
							<uniRate @change="rateChange"></uniRate>
						</view>
						<view class="cu-form-group">
							<textarea maxlength="-1" @input="contentChange" placeholder="分享景色、设施、交通等方面的体验，更能帮助到大家 哦~">								
							</textarea>
						</view>
						<view class="cu-form-group">
							<view class="title">匿名评价</view>
							<switch @change="changeAnonymous" :class="comment.anonymous?'checked':''" :checked="comment.anonymous?true:false"></switch>							
						</view>
						<view class="cu-form-group" style="min-height: 60rpx;">
							<view class="text-sm text-grey">匿名评价其他人看不到您的用户名等信息!!</view>
						</view>
						<view class="cu-form-group" style="justify-content: center;">
							<button :disabled="submitting" class="cu-btn bg-blue" @tap="submit">提交您的评价</button>
						</view>
					</view>			
			</view>
		
		</view>
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import * as confirm from '@/common/confirm.js'
	import * as upload from '@/common/upload.js'
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue"
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				screenHeight:this.s_h_notb,
				bottomHeight:this.StatusBarBottom,
				sid:0,
				isInit:false,
				/* 图片部分 begin */
				index: -1,
				imgList: [],
				img:'',
				token:'',
				submitting:false,
				/* 图片部分 end */
				comment:{
					sceneryId:0,
					score:0,
					content:"",
					anonymous:false
				}
			}
		},
		onLoad(option) {
			//更新类型时返回
			if(option.id){
				this.sid=option.id
			}
			
			this.$api.post('/common/get_token_key').then(res => {
				this.token=res.data
				this.isInit=true
			}).catch(error=>{
				confirm.info(error.msg)
			})
			
		},
		computed:{
			...mapGetters({'scenery':'scenery','gps':'loadStoreGps'}),
		},
		methods: {
			rateChange(val){
				this.comment.score=val.value
			},
			contentChange(val){
				this.comment.content=val.detail.value
			},
			changeAnonymous(val){
				this.comment.anonymous=val.detail.value
			},
			imgChange(imgs){
				this.imgList=imgs
			},
			//图片上传管理
			async submit(){				
				
				if(this.comment.score==0){
					confirm.warn("请您选择评分!!!")
					return;
				}
				if(this.comment.content.length==0){
					confirm.warn("请您输入评价!!!")
					return;
				}
								
				let _this=this
				
				if(this.imgList.length==0){
					_this.comment.sceneryId=_this.scenery.id
					
					_this.comment={..._this.comment,..._this.gps}
					
					_this.comment.images=JSON.stringify([])
					
					_this.comment.tokenKey=_this.token
					
					uni.showLoading({
						title:'提交中'
					})
					this.submitting=true
					_this.$api.post('/scenery/comment_submit',_this.comment).then(res => {					
						confirm.success("非常感谢您的评价",()=>{
							uni.hideLoading()
							this.submitting=false
							uni.navigateBack()
						})
					}).catch(error=>{
						uni.hideLoading()
						this.submitting=false
						confirm.info(error.msg)
					})
				}else{
					upload.uploadImgs('/scenery/comment_upload',this.imgList,function(res){
						let urls=[]
						res.forEach((item)=>{
							urls.push(item.path)
						})
						
						_this.comment.images=JSON.stringify(urls)
						
						_this.comment.sceneryId=_this.scenery.id
						
						_this.comment={..._this.comment,..._this.gps}
						
						_this.comment.tokenKey=_this.token
						
						uni.showLoading({
							title:'提交中'
						})
						this.submitting=true
						_this.$api.post('/scenery/comment_submit',_this.comment).then(res => {					
							confirm.success("非常感谢您的评价",()=>{
								uni.hideLoading()
								this.submitting=false
								uni.navigateBack()
							})
						}).catch(error=>{
							uni.hideLoading()
							this.submitting=false
							confirm.info(error.msg)
						})
						
					},{})
				}
				
			}
		}		
	}
</script>

<style>
</style>